<template>
  <div class="w-tabs">
    <div class="w-add-rule" @click="addRule">+ 添加联动规则</div>
    <div>
      <div class="w-form-rule" v-for="(rule, index) in formConfig.rules" :key="'rule_' + index" @click="editRule(index, rule)">
        <div class="w-form-rule-content"></div>
        <el-icon class="icon"><CircleCloseFilled @click.stop="removeRule(index)" /></el-icon>
        <div>{{ ruleFileName(rule) }}</div>
      </div>
    </div>

    <w-dialog v-model="ruleDialog" :title="`${isAddRule ? '新增' : '编辑'}表单联动规则`" @ok="confirmRule">
      <template v-if="ruleDialog">
        <condition-config class="w-rule-conditions" v-model="selectedRule.condition" :form-items="formItems" />

        <action-config
          :options="formItems"
          v-model="selectedRule.action.with"
          :selected-rule="selectedRule"
          add-text="添加动作（满足条件时执行）"
        />
      </template>
    </w-dialog>
  </div>
</template>

<script>
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { cloneDeep } from "lodash";
import ConditionConfig from "./subs/ConditionConfig.vue";
import ActionConfig from "./subs/ActionConfig.vue";
import useFlowStore from "@/store/modules/gkflow.js";

const flowStore = useFlowStore();

export default {
  name: "FormConfig",
  components: { ActionConfig, ConditionConfig },
  data() {
    return {
      ruleDialog: false,
      activeName: "base",
      isAddRule: true,
      selectedRuleIndex: null,
      selectedRule: { condition: {}, action: {} },
      validDialog: false,
      ruleProps: {
        condition: {
          logic: true,
          condition: {
            field: null,
            fieldType: null,
            compare: null,
            fixed: true,
            compareVal: []
          },
          children: []
        },
        action: {
          with: [
            //满足条件时执行
            {
              targets: [],
              type: "SHOW", //  值设定显示操作
              value: null
            }
          ],
          other: [
            //不满足条件时执行
            {
              targets: [],
              type: null,
              value: null
            }
          ]
        }
      }
    };
  },
  computed: {
    design() {
      return flowStore.design || {};
    },
    formConfig() {
      return flowStore.design?.formConfig || {};
    },
    formItemMap: {
      get() {
        return flowStore.formItemMap;
      },
      set(val) {
        flowStore.formItemMap = val;
      }
    },
    formItems() {
      const items = [];
      this.formItemMap = new Map();
      this.design.formItems.forEach(item => {
        this.loadItems(items, item);
      });
      return items;
    },
    ruleFileName() {
      return rule => {
        return rule?.condition?.condition?.ruleFiledName || "无效规则";
      };
    }
  },
  methods: {
    loadItems(items, item, alisa) {
      this.formItemMap.set(item.id, item);
      items.push({
        id: item.id,
        name: item.name,
        title: alisa || item.title,
        valueType: item.valueType,
        props: cloneDeep(item.props)
      });
    },
    addRule() {
      this.isAddRule = true;
      this.selectedRule = cloneDeep(this.ruleProps);
      this.ruleDialog = true;
    },
    editRule(i, rule) {
      this.isAddRule = false;
      this.ruleDialog = true;
      this.selectedRuleIndex = i;
      this.selectedRule = cloneDeep(rule);
    },
    removeRule(i) {
      this.formConfig.rules.splice(i, 1);
    },
    confirmRule() {
      // 生成对应的隐藏规则
      const rule = cloneDeep(this.selectedRule);
      rule.action.other = rule.action?.with?.map(item => {
        return {
          value: item.value,
          type: item.type === "SHOW" ? "HIDE" : "SHOW",
          targets: cloneDeep(item.targets)
        };
      });
      if (this.isAddRule) {
        if (Array.isArray(this.formConfig.rules)) {
          this.formConfig.rules.push(rule);
        } else {
          this.formConfig.rules = [rule];
        }
      } else {
        this.formConfig.rules[this.selectedRuleIndex] = rule;
      }
      flowStore.design.formConfig = { ...this.formConfig };
      this.ruleDialog = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.w-add-rule {
  padding: 5px;
  margin: 10px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  border: 2px dashed #e8e8e8;
  &:hover {
    color: #1989fa;
    border-color: #1989fa;
  }
}

.w-form-rule {
  position: relative;
  padding: 10px;
  margin: 15px 10px;
  border-radius: 5px;
  background-color: #f3f5f5;
  cursor: pointer;
  border: 1px solid white;
  &:hover {
    box-shadow: 0 0 10px 0 #e8e8e8;
    transition: box-shadow 0.5s;
    border: 1px dashed #1989fa;
  }
  .icon {
    position: absolute;
    right: -8px;
    top: -10px;
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 50%;
    background: #f3f5f5;
    &:hover {
      color: #f56c6c;
    }
  }
}
</style>
